<template>
  <div id="activityapply">
    <group labelAlign="right " labelWidth="70px" labelMarginRight="5px">
      <div class="act-box1">
        <form id="forms">
         <!--  <x-input class="inputText" title="姓名" placeholder="输入姓名" name="姓名" required="required" v-model="Name" ref="input01"></x-input>
          <x-input class="inputText" title="手机号" v-model="inputphone" name="手机号" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile" ref="input02"></x-input> -->
          <x-input class="inputText" v-for="(item, key) in list" :key="key" :title="item.name" :is-type="item.name === '手机号' ? 'china-mobile' : ''" :name="item.name"></x-input>
        </form>
      </div>
      <!-- <div class="act-box" v-for="item in commonList3">
        <checklist ref="demoObject" :title="item.value" :options="item.optionList" v-model="objectListValue1=item.vModel" :max="1"></checklist>
      </div>
      <div class="act-box" v-for="item in commonList4">
        <checklist ref="demoObject" :title="item.value"  :options="item.optionList" v-model="objectListValue2=item.vModel" ></checklist>
      </div>
      <div v-for="item in commonList2">
        <x-textarea :max="200" name="detail" placeholder="请输入想对我们说的话" v-model="message = item.vModel" :show-counter="false">
        </x-textarea>
      </div> -->
    </group>
    <div >
      <alert v-model="alert" >{{title}}</alert>
    </div>
    <box gap="20px 20px">
      <x-button type="primary" @click.native="saveEnroll">保存</x-button>
    </box>
  </div>
</template>
<script>
  import { XTextarea, XInput, Group, Checklist, Box, XButton, Alert } from 'vux'

  export default {
    name: 'activityapply',
    components: {
      XButton,
      XTextarea,
      XInput,
      Group,
      Box,
      Checklist,
      Alert
    },
    data () {
      return {
        alert: false,
        isType: '',
        title: '',
        list: [],
        message: '',
        commonList1: [],
        commonList2: [],
        commonList3: [],
        commonList4: [],
        objectListValue1: [],
        objectListValue2: []
      }
    },
    created () {
      this.queryActivityApply()
      // console.log(document.getElementById('forms').getElementsByTagName('input'))
    },
    methods: {
      queryActivityApply () {
        this.$axios.post(this.apidomain + '/api/activity/getApplyActivityOption/' + this.getCookie('appid'), {
          id: this.$route.query.id
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.list = response.data.data.configList
          }
        })
        .catch((error) => {
          console.log(error)
        })
      },
      getData () {
        let Arr = []
        let inpArr = document.getElementById('forms').getElementsByTagName('input')
        for (let i = 0; i < inpArr.length; i++) {
          let params = {}
          params.name = inpArr[i].name
          params.value = inpArr[i].value
          if (inpArr[i].value !== '') {
            Arr.push(params)
          }
        }
        return Arr
      },
      saveEnroll () {
        let inpArr1 = document.getElementById('forms').getElementsByTagName('input')
        for (let i = 0; i < inpArr1.length; i++) {
          if (inpArr1[i].name === '姓名') {
            var input01 = inpArr1[i]
          }
          if (inpArr1[i].name === '手机号') {
            var input02 = inpArr1[i]
          }
        }
        if (input01.value !== '' && input02.value !== '' && (/^1(3|4|5|7|8)\d{9}$/.test(input02.value)) === true) {
          this.$axios.post(this.apidomain + '/api/activity/saveApplyActivityOption/' + this.getCookie('appid'), {
            openId: this.getCookie('openid'),
            id: Number(this.$route.query.id),
            data: this.getData()
          })
          .then((response) => {
            if (response.data.errorCode === '0') {
              window.zhuge.track('Click', {
                '事件名称': '会员中心-会员活动-互动活动-活动名称-我要参加-报名-点击',
                '访问时间': new Date().toLocaleString(),
                'OpenID': this.getCookie('openid')
              }, () => {
                this.routeto('regactivity')
              })
            } else {
              this.alert = true
              this.title = '报名失败'
            }
          })
          .catch((error) => {
            console.log(error)
          })
        } else if (input01.value === '' && (input02.value !== '' || (/^1(3|4|5|7|8)\d{9}$/.test(input02.value)) === true)) {
          this.alert = true
          this.title = '姓名不能为空'
        } else if (input01.value !== '' && (input02.value !== '' || (/^1(3|4|5|7|8)\d{9}$/.test(input02.value)) === false)) {
          this.alert = true
          this.title = '请输入正确的手机号码'
        } else if (input01.value === '' && input02.value === '' && (/^1(3|4|5|7|8)\d{9}$/.test(input02.value)) === false) {
          this.alert = true
          this.title = '请填写完整的个人信息'
        }
      }
    }
  }
</script>
<style lang="less">
  @import "../../assets/less/activityapply/activityapply.less";
</style>
